<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<h5>加减计数器</h5>
			<button @click="count--">-</button>
			{{count}}
			<button @click="count++">+</button>
			
			<!-- 3个计数器 -->
			<h5>加减计数器</h5>
			<button @click="count1--">-</button>
			{{count1}}
			<button @click="count1++">+</button>
			
			<h5>加减计数器</h5>
			<button @click="count2--">-</button>
			{{count2}}
			<button @click="count2++">+</button>
			<hr>
			<my-button></my-button>
			<my-button></my-button>
			<hr>
			<h-j></h-j>
			<h-j></h-j>
			<h-j></h-j>
		</div>
		<script src="js/huangjin.js"></script>
		<script>
			const MyButton=Vue.defineComponent({
				data(){
					return{
						count:0
					}
				},
				template:`
					<h5>加减计数器</h5>
					<button @click="count--">-</button>
					{{count}}
					<button @click="count++">+</button>
				`
			})
			//定义组件
			Vue.createApp({
				components: {
					'my-button':MyButton,
					'h-j':HJ
				},
				data(){
					return{
						count:0,
						count1:0,
						count2:0
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>